import { Radio, Form, Button, Table, Row, Col, Tooltip, Switch, Space, Tag, Modal, Input, message, Popconfirm } from "antd";
import Cimage from "@/components/Cimage";
import dayjs from "dayjs";
import { SearchOutlined, PlusOutlined, EditOutlined, FormOutlined } from "@ant-design/icons";
import type { GoodsItemModel, GoodsItemskuListModel, MyGoodsListSendModel } from "@/api/modules/goods";
import type { SkuListItem } from "../set_Sku_data";

export const tableColumns = (
	categoryFilter: Function,
	openDialog: Function,
	toAddGoods: Function,
	toGoodsDetail: Function
): any[] => [
	{
		title: "上架时间",
		dataIndex: "createTime",
		key: "createTime",
		align: "center",
		ellipsis: {
			showTitle: false
		},
		width: "10%",
		render: (createTime: number) => (
			<Tooltip placement="topLeft" title={dayjs(createTime || new Date()).format("YYYY-MM-DD HH:mm")}>
				{dayjs(createTime || new Date()).format("YYYY-MM-DD HH:mm")}
			</Tooltip>
		)
	},
	{
		title: "商品封面",
		dataIndex: "iconId",
		key: "iconId",
		align: "center",
		ellipsis: {
			showTitle: false
		},
		width: "10%",
		className: "iconId_tableClass",
		render: (_: any, record: GoodsItemModel) => <Cimage src={record.iconId[0].url} width={80} height={80}></Cimage>
	},
	{
		title: "商品名称",
		dataIndex: "name",
		key: "name",
		align: "center",
		width: "15%"
	},
	{
		title: "商品标签",
		dataIndex: "hot",
		key: "hot",
		align: "center",
		width: "10%",
		render: (_: any, record: GoodsItemModel) => <Tag color="green">{record.hot}</Tag>
	},
	{
		title: "商品类别",
		dataIndex: "parentId",
		key: "parentId",
		align: "center",
		width: "10%",
		render: (_: any, record: GoodsItemModel) => <>{categoryFilter(record.parentId)}</>
	},
	{
		title: "商品库存",
		dataIndex: "stock_num",
		key: "stock_num",
		align: "center",
		width: "10%"
	},
	{
		title: "规格信息",
		dataIndex: "none_sku",
		key: "none_sku",
		align: "center",
		width: "10%",
		render: (_: any, record: GoodsItemModel) => (
			<Tag color={record.none_sku ? "red" : "blue"}>{record.none_sku ? "无规格商品" : "多个规格商品"}</Tag>
		)
	},
	{
		title: "操作",
		align: "center",
		key: "action",
		width: "25%",
		render: (_: any, record: GoodsItemModel) => (
			<Space wrap>
				<Button icon={<FormOutlined />} onClick={() => openDialog(record.id)}>
					规格列表
				</Button>
				<Button icon={<SearchOutlined />} onClick={() => toGoodsDetail(record.id)}>
					商品详情
				</Button>
				<Button type="primary" icon={<EditOutlined />} onClick={() => toAddGoods(record.id)}>
					编辑商品
				</Button>
			</Space>
		)
	}
];
export const tableDialogColumns = (openSkuDailog: Function, removeSkuList: Function): any[] => [
	{
		title: "规格封面",
		dataIndex: "image",
		key: "image",
		align: "center",
		ellipsis: {
			showTitle: false
		},
		width: "15%",
		className: "iconId_tableClass",
		render: (_: any, record: any) => <Cimage src={record.image} width={60} height={60}></Cimage>
	},
	{
		title: "规格信息",
		dataIndex: "sku_name_arr",
		key: "sku_name_arr",
		align: "center",
		width: "25%",
		render: (_: any, record: any) => (
			<Tooltip placement="topLeft" title={record.sku_name_arr.toString()}>
				<span>{record.sku_name_arr.toString()}</span>
			</Tooltip>
		)
	},
	{
		title: "当前价格",
		dataIndex: "price",
		key: "price",
		align: "center",
		width: "15%",
		render: (_: any, record: any) => <>￥{record.price}</>
	},
	{
		title: "库存",
		dataIndex: "stock",
		key: "stock",
		align: "center",
		width: "15%"
	},
	{
		title: "操作",
		align: "center",
		key: "action",
		width: "30%",
		render: (_: any, record: SkuListItem) => (
			<div className="f-c-c">
				<Space wrap>
					<Button type="primary" onClick={() => openSkuDailog(record)}>
						修改
					</Button>
					<Popconfirm
						title="确定执行该操作吗？"
						onConfirm={() => removeSkuList(record._id, record.goods_id)}
						okText="Yes"
						cancelText="No"
					>
						<Button type="primary" danger>
							删除
						</Button>
					</Popconfirm>
				</Space>
			</div>
		)
	}
];
